// (function() {
//     var myChart = echarts.init(document.querySelector('.geo'));
//     let angle = 20; //角度，用来做简单的动画效果的
//     let value = 55.33;
//     var option = {
//         // backgroundColor: "#061740",
//         title: {
//             text: '{a|' + value + '}{c|%}',
//             x: 'center',
//             y: 'center',
//             textStyle: {
//                 rich: {
//                     a: {
//                         fontSize: 48,
//                         color: '#29EEF3'
//                     },

//                     c: {
//                         fontSize: 20,
//                         color: '#ffffff',
//                         // padding: [5,0]
//                     }
//                 }
//             }
//         },
//         legend: {
//             type: "plain",
//             orient: "vertical",
//             right: 0,
//             top: "10%",
//             align: "auto",
//             data: [{
//                 name: '涨价后没吃过',
//                 icon: "circle"
//             }, {
//                 name: '天天吃',
//                 icon: "circle"
//             }, {
//                 name: '三五天吃一次',
//                 icon: "circle"
//             }, {
//                 name: '半个月吃一次',
//                 icon: "circle"
//             }],
//             textStyle: {
//                 color: "white",
//                 fontSize: 16,
//                 padding: [10, 1, 10, 0]
//             },
//             selectedMode: false
//         },
//         series: [{
//                 name: "ring5",
//                 type: 'custom',
//                 coordinateSystem: "none",
//                 renderItem: function(params, api) {
//                     return {
//                         type: 'arc',
//                         shape: {
//                             cx: api.getWidth() / 2,
//                             cy: api.getHeight() / 2,
//                             r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
//                             startAngle: (0 + angle) * Math.PI / 180,
//                             endAngle: (90 + angle) * Math.PI / 180
//                         },
//                         style: {
//                             stroke: "#0CD3DB",
//                             fill: "transparent",
//                             lineWidth: 1.5
//                         },
//                         silent: true
//                     };
//                 },
//                 data: [0]
//             }, {
//                 name: "ring5",
//                 type: 'custom',
//                 coordinateSystem: "none",
//                 renderItem: function(params, api) {
//                     return {
//                         type: 'arc',
//                         shape: {
//                             cx: api.getWidth() / 2,
//                             cy: api.getHeight() / 2,
//                             r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
//                             startAngle: (180 + angle) * Math.PI / 180,
//                             endAngle: (270 + angle) * Math.PI / 180
//                         },
//                         style: {
//                             stroke: "#0CD3DB",
//                             fill: "transparent",
//                             lineWidth: 1.5
//                         },
//                         silent: true
//                     };
//                 },
//                 data: [0]
//             }, {
//                 name: "ring5",
//                 type: 'custom',
//                 coordinateSystem: "none",
//                 renderItem: function(params, api) {
//                     return {
//                         type: 'arc',
//                         shape: {
//                             cx: api.getWidth() / 2,
//                             cy: api.getHeight() / 2,
//                             r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
//                             startAngle: (270 + -angle) * Math.PI / 180,
//                             endAngle: (40 + -angle) * Math.PI / 180
//                         },
//                         style: {
//                             stroke: "#0CD3DB",
//                             fill: "transparent",
//                             lineWidth: 1.5
//                         },
//                         silent: true
//                     };
//                 },
//                 data: [0]
//             }, {
//                 name: "ring5",
//                 type: 'custom',
//                 coordinateSystem: "none",
//                 renderItem: function(params, api) {
//                     return {
//                         type: 'arc',
//                         shape: {
//                             cx: api.getWidth() / 2,
//                             cy: api.getHeight() / 2,
//                             r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
//                             startAngle: (90 + -angle) * Math.PI / 180,
//                             endAngle: (220 + -angle) * Math.PI / 180
//                         },
//                         style: {
//                             stroke: "#0CD3DB",
//                             fill: "transparent",
//                             lineWidth: 1.5
//                         },
//                         silent: true
//                     };
//                 },
//                 data: [0]
//             }, {
//                 name: "ring5",
//                 type: 'custom',
//                 coordinateSystem: "none",
//                 renderItem: function(params, api) {
//                     let x0 = api.getWidth() / 2;
//                     let y0 = api.getHeight() / 2;
//                     let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
//                     let point = getCirlPoint(x0, y0, r, (90 + -angle))
//                     return {
//                         type: 'circle',
//                         shape: {
//                             cx: point.x,
//                             cy: point.y,
//                             r: 4
//                         },
//                         style: {
//                             stroke: "#0CD3DB", //粉
//                             fill: "#0CD3DB"
//                         },
//                         silent: true
//                     };
//                 },
//                 data: [0]
//             }, {
//                 name: "ring5", //绿点
//                 type: 'custom',
//                 coordinateSystem: "none",
//                 renderItem: function(params, api) {
//                     let x0 = api.getWidth() / 2;
//                     let y0 = api.getHeight() / 2;
//                     let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
//                     let point = getCirlPoint(x0, y0, r, (270 + -angle))
//                     return {
//                         type: 'circle',
//                         shape: {
//                             cx: point.x,
//                             cy: point.y,
//                             r: 4
//                         },
//                         style: {
//                             stroke: "#0CD3DB", //绿
//                             fill: "#0CD3DB"
//                         },
//                         silent: true
//                     };
//                 },
//                 data: [0]
//             }, {
//                 name: '吃猪肉频率',
//                 type: 'pie',
//                 radius: ['58%', '45%'],
//                 silent: true,
//                 clockwise: true,
//                 startAngle: 90,
//                 z: 0,
//                 zlevel: 0,
//                 label: {
//                     normal: {
//                         position: "center",

//                     }
//                 },
//                 data: [{
//                         value: value,
//                         name: "",
//                         itemStyle: {
//                             normal: {
//                                 color: { // 完成的圆环的颜色
//                                     colorStops: [{
//                                         offset: 0,
//                                         color: '#4FADFD' // 0% 处的颜色
//                                     }, {
//                                         offset: 1,
//                                         color: '#28E8FA' // 100% 处的颜色
//                                     }]
//                                 },
//                             }
//                         }
//                     },
//                     {
//                         value: 100 - value,
//                         name: "",
//                         label: {
//                             normal: {
//                                 show: false
//                             }
//                         },
//                         itemStyle: {
//                             normal: {
//                                 color: "#173164"
//                             }
//                         }
//                     }
//                 ]
//             },

//             {
//                 name: "",
//                 type: "gauge",
//                 radius: "58%",
//                 center: ['50%', '50%'],
//                 startAngle: 0,
//                 endAngle: 359.9,
//                 splitNumber: 8,
//                 hoverAnimation: true,
//                 axisTick: {
//                     show: false
//                 },
//                 splitLine: {
//                     length: 60,
//                     lineStyle: {
//                         width: 5,
//                         color: "#061740"
//                     }
//                 },
//                 axisLabel: {
//                     show: false
//                 },
//                 pointer: {
//                     show: false
//                 },
//                 axisLine: {
//                     lineStyle: {
//                         opacity: 0
//                     }
//                 },
//                 detail: {
//                     show: false
//                 },
//                 data: [{
//                     value: 0,
//                     name: ""
//                 }]
//             },

//         ]
//     };

//     //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
//     function getCirlPoint(x0, y0, r, angle) {
//         let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
//         let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
//         return {
//             x: x1,
//             y: y1
//         }
//     }

//     function draw() {
//         angle = angle + 3
//         myChart.setOption(option, true)
//             //window.requestAnimationFrame(draw);
//     }

//     setInterval(function() {
//         //用setInterval做动画感觉有问题
//         draw()
//     }, 100);
//     myChart.setOption(option);
// })();
(function() {
    var myChart = echarts.init(document.querySelector('.geo'));
    var value = 0.54;
    var option = {
        // backgroundColor: '#181b22',
        title: [{
            text: (value * 100).toFixed(0) + '%',
            left: '50%',
            top: '40%',
            textAlign: 'center',
            textStyle: {
                fontSize: '30',
                fontWeight: '400',
                color: '#8b8d90',
                textAlign: 'center',
                textBorderColor: 'rgba(0, 0, 0, 0)',
                textShadowColor: '#000',
                textShadowBlur: '0',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
            },
        }, ],
        polar: {
            radius: ['43%', '40%'],
            center: ['50%', '50%'],
        },
        angleAxis: {
            max: 100,
            clockwise: false,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        series: [{
                type: 'liquidFill',
                radius: '40%',
                z: 1,
                center: ['50%', '50%'],
                amplitude: 20,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                            offset: 0,
                            color: '#324791',
                        },
                        {
                            offset: 1,
                            color: '#449090',
                        },
                    ],
                    globalCoord: false,
                },
                data: [
                    0.4,
                    {
                        value: 0.4,
                        direction: 'left',
                    },
                ],
                backgroundStyle: {
                    borderWidth: 1,
                    color: 'transparent',
                },
                label: {
                    normal: {
                        formatter: '',
                    },
                },
                outline: {
                    show: true,
                    itemStyle: {
                        borderWidth: 0,
                    },
                    borderDistance: 0,
                },
            },
            {
                name: '',
                type: 'bar',
                roundCap: true,
                z: 2,
                showBackground: true,
                backgroundStyle: {
                    color: '#15181e',
                },
                data: [75],
                coordinateSystem: 'polar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, .5, 1, [{
                                offset: 0,
                                color: '#5acef2',
                            },
                            {
                                offset: .7,
                                color: '#5073fb',
                            },
                            {
                                offset: 1,
                                color: '#6ae8d8',
                            },
                        ]),
                    },
                },
            },
        ],
    };
    myChart.setOption(option);
})();
// (function() {
//     var myChart = echarts.init(document.querySelector('.geo'));
//     $.getJSON('/asset/get/s/data-1491887968120-rJODPy9ae.json', function(data) {

//         data = data.filter(function(dataItem) {
//             return dataItem[2] > 0;
//         }).map(function(dataItem) {
//             return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
//         });

//         myChart.setOption({
//             visualMap: {
//                 show: false,
//                 min: 0,
//                 max: 60,
//                 inRange: {
//                     symbolSize: [1.0, 10.0]
//                 }
//             },
//             globe: {

//                 show: false,
//                 // baseTexture: "/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg",
//                 // heightTexture: "data-gl/asset/world.topo.bathy.200401.jpg",
//                 globeOuterRadius: 100,
//                 // shading: 'color',
//                 displacementScale: 0.05,
//                 displacementQuality: 'high',
//                 realisticMaterial: { // 纹理贴图相关
//                     roughness: 0.7, // 材质的粗糙度  越粗糙反光度越低
//                     metalness: 0.5, // 金属质感 0为金属  1为非金属, 在这之间设置
//                 },
//                 environment: '/asset/get/s/data-1491837999815-H1_44Qtal.jpg',
//                 viewControl: {
//                     autoRotate: true,
//                     distance: 150,
//                     targetCoord: [123.38, 6.09]
//                 },

//                 light: {
//                     // main: {
//                     //     intensity: 5,
//                     //     shadow: false
//                     // },
//                     ambient: {
//                         intensity: 2
//                     },
//                     // ambientCubemap: {
//                     //     texture: 'data-gl/asset/pisa.hdr',
//                     //     diffuseIntensity: 5
//                     // }
//                 }
//             },
//             series: [{
//                 type: 'scatter3D',
//                 coordinateSystem: 'globe',
//                 // blendMode: 'lighter',
//                 symbolSize: 1,
//                 silent: true,
//                 itemStyle: {
//                     color: '#0276f3',
//                     opacity: 1,
//                 },
//                 data: data
//             }]

//         })
//     });
//     myChart.setOption(getJSON);
// })();